<template>
  <div class="container">
    <el-image
      :src="
        aarticle?.image_url ? aarticle?.image_url : loadAssetsURL('default/default_article.png')
      "
      class="article-head"
    >
      <template #error>
        <div class="image-slot">
          <img :src="loadAssetsURL('default/default_article.png')" alt="" />
        </div> </template
    ></el-image>
    <div class="article-introduction" :class="{ isTouched: file_id == aarticle.id }">
      <p class="title t-of-1">
        {{ aarticle?.title }}
      </p>
      <p class="contnet t-of-2">{{ aarticle?.introduction }}</p>
      <div class="links flex-c">
        <div class="link-item">
          <img :src="loadAssetsURL('article/like.png')" alt="点赞" />
          <p class="link-count">{{ aarticle?.likes ? aarticle?.likes : 0 }}</p>
        </div>

        <div class="link-item">
          <img :src="loadAssetsURL('article/look.png')" alt="查看" />
          <p class="link-count">{{ aarticle?.views ? aarticle?.views : 0 }}</p>
        </div>

        <div class="link-item">
          <img :src="loadAssetsURL('article/message.png')" alt="回复" />
          <p class="link-count">{{ aarticle?.comments ? aarticle?.comments : 0 }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { loadAssetsURL } from '@/utils/load-assets'

const props = defineProps<{ aarticle: any; file_id: any }>()
</script>

<style lang="less" scoped>
.container {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  border-radius: 7px 7px 7px 7px;
  user-select: none;
  cursor: pointer;
  .article-head {
    width: 172px;
    height: 172px;
    background: #486284;
    border-radius: 7px 7px 7px 7px;
  }
  .article-introduction {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .title {
      width: 641px;
      font-size: 23px;
      font-weight: 600;
      color: #252525;
    }

    .contnet {
      margin-top: 9px;
      width: 650px;
      font-size: 17px;
      font-weight: 500;
      color: #252525;
      line-height: 26px;
    }
    .links {
      margin-top: 15px;
      .link-item {
        font-size: 15px;
        font-weight: 500;
        color: #666666;
        display: flex;
        align-items: center;
        margin-right: 20px;
        img {
          width: 22px;
          margin-right: 4px;
        }
      }
    }
  }
  .isTouched {
    background: linear-gradient(90deg, #ffffff 0%, #e6e6e6 100%);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
    border-radius: 7px 7px 7px 7px;
    .title {
      color: #0075ff;
    }
  }
}
</style>
